import React from "react";
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import * as echarts from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
} from "../helps/echartsCommon";

export const getKxQaTimesBarChartOption = ({
  dataSource = [],
}: KxQaTimesBarChartProps): EChartsOption => {
  return {
    grid: {
      left: "18%",
      bottom: 35,
    },
    tooltip: {
      show: true,
    },
    legend: {
      data: ["巡检检查", "定期检查", "日常检查"],
      top: "5%",
      right: "15",
      textStyle: {
        fontSize: 12,
        color: "#FDFFFF",
      },
      itemWidth: 12,
      itemHeight: 6,
      itemGap: 20,
    },
    barWidth: 15,
    xAxis: {
      show: true,
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.1,
          width: 1,
        },
      },
      axisLabel: {
        show: true,
        fontSize: 12,
        fontFamily: "Arial",
        color: "#FDFFFF",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: dataSource.map((d) => d.name || ""),
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //  改变y轴颜色
        show: false,
      },
      axisLabel: {
        //  改变y轴字体颜色和大小
        fontSize: 16,
        color: "#FFFFFF",
        margin: 39,
        overflow: "truncate",
        width: 65,
        align: "center",
      },
    },
    series: [
      {
        type: "bar",
        name: "巡检检查",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#FECFEE",
            },
            {
              offset: 1,
              color: "#FF9CA0",
            },
          ]),
          borderRadius: 12,
        },
        data: dataSource.map((d) => d.routeAmount || 0),
      },
      {
        type: "bar",
        name: "定期检查",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#1ED94F",
            },
            {
              offset: 1,
              color: "#F2F047",
            },
          ]),
          borderRadius: 11,
        },
        data: dataSource.map((d) => d.regularAmount || 0),
      },
      {
        type: "bar",
        name: "日常检查",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#824AFF",
            },
            {
              offset: 1,
              color: "#4A78FF",
            },
          ]),
          borderRadius: 11,
        },
        data: dataSource.map((d) => d.dailyAmount || 0),
      },
    ],
  };
};

export interface KxQaTimesBarChartProps extends CockpitChartBaseProps {
  img?: string;
}
export const KxQaTimesBarChart = ({
  reactEChartsProps,
  dataSource = [],
  height = "469px",
}: KxQaTimesBarChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      style={{
        height: height,
      }}
      option={getKxQaTimesBarChartOption({
        dataSource,
      })}
      {...reactEChartsProps}
    />
  );
};
export default KxQaTimesBarChart;
